<!--
 * @Des: 表单查询
 * @Author: jin_yc
 * @Date: 2019-11-08 10:21:45
 * @LastEditor: jin_yc
 * @LastEditTime: 2021-12-14 11:02:04
 -->
<template>
  <div class="my-task-container">
    <fks-query-page
      v-loading="loading"
      :page-sizes="[15, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :current-page.sync="page"
      :page-size.sync="size"
      :data="tableData"
      highlight-current-row
      :total="total"
      :table-name="LANG.MY_TASK_DONE"
      @query="getData"
      @clear="clear"
      @sort-change="sortHandler"
    >
      <template slot="search">
        <!-- <fks-search-item :label="LANG.TASK_SUBJECT">
          <fks-input v-model="taskSubject" @keyup.enter.native="getData" />
        </fks-search-item> -->
        <fks-search-item :label="LANG.FORM_NAME">
          <fks-input v-model="formName" @keyup.enter.native="getData" />
        </fks-search-item>
        <fks-search-item :label="LANG.CREATOR">
          <fks-input
            v-model="creator"
            @keyup.enter.native="getData"
          ></fks-input>
        </fks-search-item>
        <!-- <fks-search-item :label="LANG.ASSIGNEE">
          <fks-input v-model="asignee" @keyup.enter.native="getData" />
        </fks-search-item> -->
        <fks-search-item :span="24" :label="LANG.PROCESS_CREATE_TIME">
          <fks-time-span-pick
            value-format="yyyy-MM-dd"
            :start-time.sync="startDate"
            :end-time.sync="endDate"
          />
        </fks-search-item>
      </template>
      <template>
        <fks-table-column type="index" align="center" label="#" width="60" />
        <fks-table-column
          is-link
          prop="formName"
          :label="LANG.FORM_NAME"
          header-align="center"
          align="left"
          min-width="180"
        >
          <template slot-scope="scope">
            <span @click="view(scope.row)">{{ scope.row.formName }}</span>
          </template>
        </fks-table-column>
        <fks-table-column
          prop="taskSubject"
          :label="LANG.TASK_SUBJECT"
          header-align="center"
          align="left"
          min-width="120"
        />
        <fks-table-column
          min-width="80"
          prop="taskState"
          :label="LANG.FORM_STATE"
          align="center"
        >
          <template slot-scope="scope">
            <fks-tag v-if="scope.row.taskState == 0">
              {{ LANG.FORM_UNFINISHED }}
            </fks-tag>
            <fks-tag v-if="scope.row.taskState == 1" type="success">
              {{ LANG.FORM_FINISHED }}
            </fks-tag>
            <fks-tag v-if="scope.row.taskState == 2" type="danger">
              {{ LANG.ABANDON }}
            </fks-tag>
            <fks-tag v-if="scope.row.taskState == 3" type="warning">
              {{ LANG.SAVEDRAFT }}
            </fks-tag>
          </template>
        </fks-table-column>
        <fks-table-column
          prop="taskCreatorName"
          min-width="80"
          :label="LANG.CREATOR"
          align="center"
        />
        <fks-table-column
          prop="createDate"
          min-width="160"
          :label="LANG.PROCESS_CREATE_TIME"
          sortable
          align="center"
        >
          <template slot-scope="scope">
            {{
              scope.row.createDate
                ? $dayjs(scope.row.createDate).format('YYYY-MM-DD HH:mm')
                : ''
            }}
          </template>
        </fks-table-column>
        <fks-table-column
          prop="taskAsigneeName"
          min-width="80"
          :label="LANG.ASSIGNEE"
          align="center"
        />
        <fks-table-column :label="LANG.OPERATION" align="center">
          <template slot-scope="scope">
            <fks-button
              class="table-column-opt-button"
              type="text"
              @click="withdraw(scope.row)"
            >
              {{ LANG.WITHDRAW }}
            </fks-button>
          </template>
        </fks-table-column>
      </template>
    </fks-query-page>
    <router-view></router-view>
  </div>
</template>

<script>
import { getMyTaskDone, withdrawReq } from './api'
export default {
  name: 'MyTaskDone',
  data() {
    return {
      loading: false,
      asignee: '',
      taskName: '',
      formName: '',
      creator: '',
      taskSubject: '',
      startDate: '',
      endDate: '',
      searchBarH: '58',
      page: 1,
      size: 15,
      total: 0,
      sortOrder: '',
      sortColumn: '',
      tableData: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      getMyTaskDone({
        asignee: this.asignee,
        creator: this.creator,
        formName: this.formName,
        startDate: this.startDate ? this.startDate + ' 00:00:00' : '',
        endDate: this.endDate ? this.endDate + ' 23:59:59' : '',
        taskSubject: this.taskSubject,
        page: this.page,
        order: this.sortOrder,
        column: this.sortColumn,
        size: this.size
      }).then((res) => {
        if (res.status) {
          this.tableData = res.data.list
          this.total = res.data.total
        }
        this.loading = false
      })
    },

    /**
     * @description: 编辑
     * @param {row} 被编辑行数据
     */
    clear() {
      this.taskSubject = ''
      this.formName = ''
      this.creator = ''
      this.asignee = ''
      this.startDate = ''
      this.endDate = ''
    },
    view(data) {
      //data.ext1 == '1'表示为自由流程
      if (data.formBizId && data.formKey && data.ext1 === '1') {
        this.$router.push({
          path:
            this.$route.path +
            '/customForm/view/' +
            data.formKey +
            '/' +
            data.formBizId,
          query: {
            taskName: data.taskName,
            processInstanceId: data.processInstanceId
          }
        })
      } //data.ext1 !== '1'表示为普通流程
      else if (data.formBizId && data.formKey && data.ext1 !== '1') {
        this.$router.push(
          this.$route.path +
            `/form/view/${data.formKey}/${data.formBizId}?processInstanceId=${data.processInstanceId}`
        )
      } else {
        this.$message.warning(this.LANG.MISSING_PARAMETER)
      }
    },
    //撤回
    withdraw(row) {
      console.log(row)
      this.$confirm(this.LANG.WITHDRAW_NOTICE, this.LANG.TIPS, {
        type: 'warning'
      })
        .then(() => {
          let params = { taskId: row.taskId }
          withdrawReq(params)
            .then(() => {
              this.$message({
                type: 'success',
                message: this.LANG.WITHDRAW_SUCCESS
              })
              this.getData()
            })
            .catch((err) => {
              console.log(err)
            })
        })
        .catch((err) => {
          console.log(err)
        })
    },
    /**
     * @description: 排序
     */
    sortHandler(data) {
      this.sortOrder = data.order
        ? data.order == 'ascending'
          ? 'asc'
          : 'desc'
        : null
      this.sortColumn = data.prop
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
.my-task-container {
  position: relative;
  height: 100%;
  overflow: auto;

  .search-bar {
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: #eee;
    }
  }
}

.btns {
  margin-bottom: 20px;
}
</style>
